<template>
  <div>
    <a-card :bordered="false">
      <div class="org-table-operations">
        <a-button type="primary" icon="plus" @click="handleAddModal()">添加</a-button>
        <a-input style="width:200px;margin-left: 20px;" v-model="selectObj.webName" placeholder="输入网站名称" />
        <a-input style="width:200px;margin-left: 20px;" v-model="selectObj.webIcp" placeholder="输入网站号" />
        <a-button style="margin-left: 20px;" icon="search" @click="handleSelect()">查询</a-button>
        <a-button style="margin-left: 20px;" icon="search" @click="handleSelectRest()">重置</a-button>
      </div>
    </a-card>
    <a-card :bordered="false">
      <a-row :gutter="8">
        <a-col :span="24">
          <div>
            <a-table
              :columns="columns"
              :rowKey="record => record.pid"
              :dataSource="listData"
              :pagination="paginations"
              :loading="loading"
              @change="onChange"
            >
              <span slot="action" slot-scope="text, record">
                <template>
                  <a @click="handleEditModal(record)">编辑</a>
                  <a-divider type="vertical" />
                  <a @click="handleDataRemove(record)">移除</a>
                </template>
              </span>
            </a-table>
          </div>
        </a-col>
      </a-row>
      <webinfo-modal ref="appModal" @ok="handleModalSaveOk" @close="handleModalCancel" />
    </a-card>
  </div>
</template>

<script>
import WebinfoModal from './WebinfoModal'
import { getListByOrgPid, getCountByOrgPid, delInfo, getCountLikeExample, getListLikeExample } from './webinfo'
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'

export default {
  name: 'WebinfoList',
  components: {
    WebinfoModal
  },
  data () {
    return {
      // 中文
      locale: zhCN,
      // 表头
      columns: [
         {
          title: '网站名称',
          dataIndex: 'webName'
        },
        {
          title: '网站用户',
          dataIndex: 'webUser'
          // sorter: true
          // needTotal: true,
          // customRender: (text) => text + ' 次'
        },
        {
          title: '联系人',
          dataIndex: 'webContact'
        },
        {
          title: '联系地址',
          dataIndex: 'webContactAddress'
        },
        {
          title: '联系邮箱',
          dataIndex: 'webContactEmail'
        },
        {
          title: '网站号',
          dataIndex: 'webIcp'
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '180px',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载控制
      loading: false,
      // 列表数据
      listData: [],
      paginations: {
        showSizeChanger: true,
        showQuickJumper: true,
        current: 1,
        total: 0,
        pageSize: 10
      },
      // 多选
      selectedRowKeys: [],
      selectedRows: [],
      // 查询对象
      selectObj: {
        webName: null,
        webContactEmail: null,
        webIcp: null
      }
    }
  },
  created () {
    // this.fetch()
  },
  mounted () {
    // 计数
    this.getCount()
    // 列表
    this.getListData()
  },
  methods: {
    // 查询列表
    async getListData () {
      this.loading = true
      const headers = {
        'authOption': '1'
      }
      // 同步查询列表页
      const res = await getListByOrgPid(headers, this.paginations)
      this.loading = false
      // result.then(res => {
        if (res && res.code && res.code === 'C1' && res.data) {
          this.listData = res.data
        }
      // })
    },
    // 计数
    getCount () {
      const headers = {
        'authOption': '1'
      }
      getCountByOrgPid(headers).then(res => {
        if (res && res.code && res.code === 'C1' && res.data) {
          this.paginations.total = res.data
        } else {
          this.paginations.total = 0
        }
        this.paginations.showTotal = this.showTotal
      })
    },
    // 查询按钮
    async handleSelect () {
      // 处理空字符
      this.selectObj.webName = (!this.selectObj.webName || this.selectObj.webName.replace(/\s+/g, '') === '') ? null : this.selectObj.webName.replace(/\s+/g, '')
      this.selectObj.webContactEmail = (!this.selectObj.webContactEmail || this.selectObj.webContactEmail.replace(/\s+/g, '') === '') ? null : this.selectObj.webContactEmail.replace(/\s+/g, '')
      this.selectObj.webIcp = (!this.selectObj.webIcp || this.selectObj.webIcp.replace(/\s+/g, '') === '') ? null : this.selectObj.webIcp.replace(/\s+/g, '')

      this.loading = true
      const headers = {
        'authOption': '1'
      }
      getCountLikeExample(this.selectObj, headers).then(res => {
        if (res && res.code && res.code === 'C1' && res.data) {
          this.paginations.total = res.data
        } else {
          this.paginations.total = 0
        }
        this.paginations.showTotal = this.showTotal
      })
      const res = await getListLikeExample(this.selectObj, headers, this.paginations)
      this.loading = false
      if (res && res.code && res.code === 'C1' && res.data) {
        this.listData = res.data
      }
    },
    // 复原按钮
    handleSelectRest () {
      this.selectObj = {
        webName: null,
        webContactEmail: null,
        webIcp: null
      }
      this.paginations.current = 1
      this.paginations.pageSize = 10
      this.paginations.total = 0
      // 计数
      this.getCount()
      // 列表
      this.getListData()
    },
    // 标题点击
    handleTitleClick (item) {
      console.log('handleTitleClick', item)
    },
    titleClick (e) {
      console.log('titleClick', e)
    },
    // 新增数据
    handleAddModal () {
      this.$refs.appModal.showAddModal()
    },
    // 编辑数据
    handleEditModal (record) {
      this.$refs.appModal.showEditModal(record)
    },
    // 移除按钮
    handleDataRemove (record) {
      const _this = this
      if (record.sysSeq && record.pid) {
        _this.$confirm({
          title: '确定移除?',
          content: '该操作将移除数据，且不可恢复',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk () {
            delInfo(record, {})
              .then(res => {
                if (res && res.code && res.code === 'C1' && res.data) {
                  _this.getListData()
                  _this.$message.success('已移除', 3)
                  // console.log(this.treeData)
                }
              })
          }
        })
      }
    },
    // 总条数
    showTotal (total) {
      return `共 ${total} 条`
    },
    // 多选
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    // 翻页等
    onChange (params) {
      this.paginations.current = params.current
      this.paginations.pageSize = params.pageSize
      this.getListData()
    },
    // 编辑框ok
    handleModalSaveOk () {
      this.getListData()
    },
    // 编辑框cancel
    handleModalCancel () {
    }
  }
}
</script>

<style lang="less">
  .org-table-operations {
    margin-bottom: 5px;
  }
  .org-table-operations > button {
    margin-right: 8px;
  }
  .custom-tree {

    /deep/ .ant-menu-item-group-title {
      position: relative;
      &:hover {
        .btn {
          display: block;
        }
      }
    }

    /deep/ .ant-menu-item {
      &:hover {
        .btn {
          display: block;
        }
      }
    }

    /deep/ .btn {
      display: none;
      position: absolute;
      top: 0;
      right: 10px;
      width: 20px;
      height: 40px;
      line-height: 40px;
      z-index: 1050;

      &:hover {
        transform: scale(1.2);
        transition: 0.5s all;
      }
    }
  }
</style>
